<template>
  <div class="management-page">
    <div class="page-header">
      <h1>管理系统会员卡信息</h1>
      <p>管理健身房会员卡类型、价格和状态</p>
    </div>

    <div class="content-card">
      <div class="card-header">
        <h2>会员卡类型列表</h2>
        <div class="header-actions">
          <button class="btn-secondary" @click="refreshData">
            <i class="fas fa-sync-alt"></i>
            刷新
          </button>
        </div>
      </div>

      <div class="card-body">
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
          <div class="spinner"></div>
          <p>加载中...</p>
        </div>

        <!-- 错误状态 -->
        <div v-if="error" class="error-container">
          <i class="fas fa-exclamation-circle"></i>
          <h3>数据加载失败</h3>
          <p>{{ error }}</p>
          <button @click="refreshData" class="btn-retry">重试</button>
        </div>

        <!-- 数据表格 -->
        <div v-if="!loading && !error && memberCardTypes.length > 0" class="table-container">
          <div class="table-responsive">
            <table class="data-table">
              <thead>
              <tr>
                <th>会员卡类型ID</th>
                <th>会员卡名称</th>
                <th>价格</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="cardType in memberCardTypes" :key="cardType.cardTypeId">
                <td><span class="id-badge">{{ cardType.cardTypeId }}</span></td>
                <td class="card-name">{{ cardType.cardName }}</td>
                <td class="price">¥{{ cardType.price }}</td>
                <td>
                    <span class="status-badge" :class="cardType.status === 1 ? 'active' : 'inactive'">
                      <i :class="cardType.status === 1 ? 'fas fa-check-circle' : 'fas fa-times-circle'"></i>
                      {{ cardType.status === 1 ? '可用' : '不可用' }}
                    </span>
                </td>
                <td>
                  <div class="action-buttons">
                    <button class="btn-action btn-edit" @click="editCardType(cardType)" title="编辑">
                      <i class="fas fa-edit"></i>
                      编辑
                    </button>
                    <button class="btn-action btn-toggle" @click="toggleStatus(cardType)" :title="cardType.status === 1 ? '禁用' : '启用'">
                      <i :class="cardType.status === 1 ? 'fas fa-pause' : 'fas fa-play'"></i>
                      {{ cardType.status === 1 ? '禁用' : '启用' }}
                    </button>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-if="!loading && !error && memberCardTypes.length === 0" class="empty-container">
          <div class="empty-icon">
            <i class="fas fa-id-card"></i>
          </div>
          <h3>暂无会员卡类型数据</h3>
          <p>您还没有创建任何会员卡类型，点击下方按钮初始化默认数据</p>
          <button class="btn-primary" @click="initDefaultCardTypes">
            <i class="fas fa-database"></i>
            初始化默认数据
          </button>
        </div>
      </div>
    </div>

    <!-- 添加/编辑对话框 -->
    <div v-if="showAddDialog" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>{{ editingCardType ? '编辑会员卡类型' : '新增会员卡类型' }}</h3>
          <button class="modal-close" @click="closeModal" aria-label="关闭">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="saveCardType">
            <div class="form-group">
              <label for="cardName">卡类型名称</label>
              <input
                  id="cardName"
                  v-model="form.cardName"
                  type="text"
                  placeholder="请输入卡类型名称"
                  required
                  class="form-input"
              >
            </div>
            <div class="form-group">
              <label for="price">价格</label>
              <div class="input-with-unit">
                <input
                    id="price"
                    v-model="form.price"
                    type="number"
                    step="0.01"
                    min="0"
                    placeholder="0.00"
                    required
                    class="form-input"
                >
                <span class="input-unit">元</span>
              </div>
            </div>
            <div class="form-group">
              <label for="status">状态</label>
              <select id="status" v-model="form.status" class="form-select">
                <option :value="1">可用</option>
                <option :value="0">不可用</option>
              </select>
            </div>
            <div class="form-actions">
              <button type="button" class="btn-cancel" @click="closeModal">取消</button>
              <button type="submit" class="btn-save">{{ editingCardType ? '更新' : '创建' }}</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, reactive } from 'vue'

export default {
  name: 'MemberCardTypeManagement',
  setup() {
    const memberCardTypes = ref([])
    const loading = ref(false)
    const error = ref('')
    const showAddDialog = ref(false)
    const editingCardType = ref(null)

    const form = reactive({
      cardName: '',
      price: '',
      status: 1
    })

    // 获取会员卡类型列表
    const fetchMemberCardTypes = async () => {
      loading.value = true
      error.value = ''
      try {
        const response = await fetch('http://localhost:8081/api/member-card-type/list')
        if (!response.ok) {
          throw new Error('获取数据失败')
        }
        const result = await response.json()
        if (result.code === 200) {
          memberCardTypes.value = result.data
        } else {
          throw new Error(result.message || '获取数据失败')
        }
      } catch (err) {
        error.value = err.message
      } finally {
        loading.value = false
      }
    }

    // 刷新数据
    const refreshData = () => {
      fetchMemberCardTypes()
    }

    // 编辑会员卡类型
    const editCardType = (cardType) => {
      editingCardType.value = cardType
      form.cardName = cardType.cardName
      form.price = cardType.price
      form.status = cardType.status
      showAddDialog.value = true
    }

    // 切换状态
    const toggleStatus = async (cardType) => {
      if (!confirm(`确定要${cardType.status === 1 ? '禁用' : '启用'}该会员卡类型吗？`)) {
        return
      }

      try {
        const newStatus = cardType.status === 1 ? 0 : 1
        const response = await fetch(`http://localhost:8081/api/member-card-type/${cardType.cardTypeId}/status?status=${newStatus}`, {
          method: 'PUT'
        })

        if (response.ok) {
          const result = await response.json()
          if (result.code === 200) {
            await refreshData()
          } else {
            throw new Error(result.message)
          }
        } else {
          throw new Error('状态更新失败')
        }
      } catch (err) {
        alert(err.message)
      }
    }

    // 删除会员卡类型
    const deleteCardType = async (cardTypeId) => {
      if (!confirm('确定要删除这个会员卡类型吗？此操作不可撤销。')) {
        return
      }

      try {
        const response = await fetch(`http://localhost:8081/api/member-card-type/${cardTypeId}`, {
          method: 'DELETE'
        })

        if (response.ok) {
          const result = await response.json()
          if (result.code === 200) {
            await refreshData()
          } else {
            throw new Error(result.message)
          }
        } else {
          throw new Error('删除失败')
        }
      } catch (err) {
        alert(err.message)
      }
    }

    // 保存会员卡类型
    const saveCardType = async () => {
      try {
        const url = editingCardType.value
            ? `http://localhost:8081/api/member-card-type/update`
            : 'http://localhost:8081/api/member-card-type'

        const method = editingCardType.value ? 'PUT' : 'POST'
        const body = editingCardType.value
            ? { ...form, cardTypeId: editingCardType.value.cardTypeId }
            : form

        const response = await fetch(url, {
          method: method,
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(body)
        })

        if (response.ok) {
          const result = await response.json()
          if (result.code === 200) {
            closeModal()
            await refreshData()
          } else {
            throw new Error(result.message)
          }
        } else {
          throw new Error('保存失败')
        }
      } catch (err) {
        alert(err.message)
      }
    }

    // 初始化默认数据
    const initDefaultCardTypes = async () => {
      try {
        const response = await fetch('http://localhost:8081/api/member-card-type/init-default', {
          method: 'POST'
        })

        if (response.ok) {
          const result = await response.json()
          if (result.code === 200) {
            await refreshData()
          } else {
            throw new Error(result.message)
          }
        } else {
          throw new Error('初始化失败')
        }
      } catch (err) {
        alert(err.message)
      }
    }

    // 关闭模态框
    const closeModal = () => {
      showAddDialog.value = false
      editingCardType.value = null
      form.cardName = ''
      form.price = ''
      form.status = 1
    }

    onMounted(() => {
      fetchMemberCardTypes()
    })

    return {
      memberCardTypes,
      loading,
      error,
      showAddDialog,
      editingCardType,
      form,
      refreshData,
      editCardType,
      toggleStatus,
      deleteCardType,
      saveCardType,
      initDefaultCardTypes,
      closeModal
    }
  }
}
</script>

<style scoped>
.management-page {
  padding: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1f35 0%, #0f172a 100%);
  color: #e2e8f0;
}

.page-header {
  margin-bottom: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.page-header h1 {
  color: #f8fafc;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.025em;
}

.page-header p {
  color: #94a3b8;
  font-size: 1.125rem;
  margin: 0;
}

.content-card {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(30, 41, 59, 0.5);
}

.card-header h2 {
  color: #f1f5f9;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 1rem;
}

.btn-primary, .btn-secondary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

.card-body {
  padding: 2rem;
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  color: #94a3b8;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(59, 130, 246, 0.2);
  border-left: 4px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-container p {
  margin: 0;
  font-size: 1.125rem;
}

/* 错误状态 */
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  color: #f87171;
  background: rgba(248, 113, 113, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(248, 113, 113, 0.2);
}

.error-container i {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.error-container h3 {
  color: #fca5a5;
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
}

.error-container p {
  margin: 0 0 1.5rem 0;
  color: #fecaca;
  max-width: 400px;
}

.btn-retry {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 6px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-retry:hover {
  background: rgba(248, 113, 113, 0.25);
  color: white;
}

/* 表格样式 */
.table-container {
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.table-responsive {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(30, 41, 59, 0.5);
}

.data-table th {
  background: rgba(15, 23, 42, 0.8);
  color: #e2e8f0;
  font-weight: 600;
  text-align: left;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.data-table td {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #cbd5e0;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover {
  background: rgba(59, 130, 246, 0.05);
}

.id-badge {
  background: rgba(99, 102, 241, 0.1);
  color: #818cf8;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: monospace;
}

.card-name {
  font-weight: 600;
  color: #f1f5f9;
}

.price {
  font-weight: 700;
  color: #10b981;
  font-size: 1.125rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-badge.active {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-badge.inactive {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.action-buttons {
  display: flex;
  gap: 0.5rem;
}

.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  white-space: nowrap;
}

.btn-edit {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.btn-edit:hover {
  background: rgba(59, 130, 246, 0.2);
  transform: translateY(-1px);
}

.btn-toggle {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.btn-toggle:hover {
  background: rgba(245, 158, 11, 0.2);
  transform: translateY(-1px);
}

.btn-delete {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.btn-delete:hover {
  background: rgba(239, 68, 68, 0.2);
  transform: translateY(-1px);
}

/* 空状态 */
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.empty-icon {
  font-size: 4rem;
  color: #475569;
  margin-bottom: 1.5rem;
  opacity: 0.7;
}

.empty-container h3 {
  color: #e2e8f0;
  margin: 0 0 0.75rem 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.empty-container p {
  color: #94a3b8;
  margin: 0 0 2rem 0;
  max-width: 400px;
  line-height: 1.6;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  backdrop-filter: blur(4px);
}

.modal-content {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: modal-appear 0.3s ease-out;
}

@keyframes modal-appear {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(30, 41, 59, 0.8);
}

.modal-header h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 1.25rem;
  font-weight: 600;
}

.modal-close {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #cbd5e0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

.modal-body {
  padding: 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #e2e8f0;
  font-weight: 600;
  font-size: 0.875rem;
}

.form-input, .form-select {
  width: 100%;
  padding: 0.875rem 1rem;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #f8fafc;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.form-input::placeholder {
  color: #64748b;
}

.form-input:focus, .form-select:focus {
  outline: none;
  border-color: #3b82f6;
  background: rgba(15, 23, 42, 0.9);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.input-with-unit {
  position: relative;
}

.input-unit {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.875rem;
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
}

.btn-cancel, .btn-save {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.875rem;
}

.btn-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

.btn-save {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-save:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header h1 {
    font-size: 1.75rem;
  }

  .page-header p {
    font-size: 1rem;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .card-body {
    padding: 1.5rem;
  }

  .data-table th,
  .data-table td {
    padding: 0.875rem 1rem;
  }

  .action-buttons {
    flex-direction: column;
    gap: 0.375rem;
  }

  .btn-action {
    width: 2.25rem;
    height: 2.25rem;
  }

  .modal-content {
    margin: 1rem;
    width: calc(100% - 2rem);
  }

  .modal-header,
  .modal-body {
    padding: 1.25rem;
  }

  .form-actions {
    flex-direction: column;
  }

  .btn-cancel,
  .btn-save {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .data-table {
    font-size: 0.875rem;
  }

  .data-table th,
  .data-table td {
    padding: 0.75rem 0.5rem;
  }

  .id-badge,
  .status-badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }

  .price {
    font-size: 1rem;
  }
}
</style>